import { getContext } from './context.js';
import {sleep} from './handy.js';
const DURATION = 500; // ms

export function closeModal(modalId) {
    console.log('关弹弹窗：' + modalId);
    const modalEl = document.getElementById(modalId);
    /** @type {HTMLElement} */
    const box = modalEl.querySelector('.box');
    box.style.transform = 'translate3d(0, 0, 0)';
    box.style.opacity = '1';
    box.style.transitionProperty = 'opacity, transform';
    box.style.transitionDuration = DURATION + 'ms';
    box.style.transform = 'translate3d(0, -100px, 0)';
    box.style.opacity = '0';
    /** @type {HTMLElement} */
    const backdrop = modalEl.querySelector('.backdrop');
    backdrop.style.opacity = '1';
    backdrop.style.transitionDuration = DURATION + 'ms';
    backdrop.style.transitionProperty = 'opacity';
    backdrop.style.opacity = '0';
    setTimeout(() => {
        const context = getContext();
        context.isShowBaseInfoForm = false;
    }, DURATION);
}

export async function showModal(modalId) {
    console.log('打开弹窗：' + modalId);
    const context = getContext();
    context.isShowBaseInfoForm = true;
    const modalEl = document.getElementById(modalId);
    /** @type {HTMLElement} */
    const box = modalEl.querySelector('.box');
    box.style.transform = 'translate3d(0, -100px, 0)';
    box.style.opacity = '0';
    modalEl.style.display = '';
    modalEl.clientWidth;
    box.style.transitionProperty = 'opacity, transform';
    box.style.transitionDuration = DURATION + 'ms';
    box.style.transform = 'translate3d(0, 0, 0)';
    box.style.opacity = '1';
    /** @type {HTMLElement} */
    const backdrop = modalEl.querySelector('.backdrop');
    backdrop.style.opacity = '0';
    backdrop.style.transitionDuration = DURATION + 'ms';
    backdrop.style.transitionProperty = 'opacity';
    backdrop.style.opacity = '1';
}
